﻿@model Xms.Web.Customize.Models.EditOptionSetModel

<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            <a data-toggle="collapse"
               href="#collapseTwo">
                <strong>@app.PrivilegeTree?.LastOrDefault().DisplayName</strong>
            </a>
        </h3>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse in">
        <div class="panel-body">
            <form action="/@app.OrganizationUniqueName/customize/@app.ControllerName/@app.ActionName" method="post" id="editform" class="form-horizontal" role="form" data-autoreset="true">
                @Html.AntiForgeryToken()
                @Html.ValidationSummary()
                @Html.HiddenFor(x => x.SolutionId)
                <div class="form-group col-sm-12">
                    @Html.LabelFor(x => x.Name, app.T["name"], new { @class = "col-sm-2 control-label" })
                    <div class="col-sm-10">
                        @Html.TextBoxFor(x => x.Name, new { @class = "form-control required" })
                    </div>
                </div>
                <div class="form-group col-sm-12">
                    <label class="col-sm-2 control-label" for="optionset-picklist">@app.T["option"]</label>
                    <div class="col-sm-10">
                        <div class="btn-group btn-group-xs">
                            <button type="button" class="btn btn-primary" onclick="addOption('optionset-picklist')">
                                <span class="glyphicon glyphicon-plus-sign"></span> @app.T["add"]
                            </button>
                            <button type="button" class="btn btn-warning " onclick="clearOption('optionset-picklist')">
                                <span class="glyphicon glyphicon-trash"></span> @app.T["clear"]
                            </button>
                        </div>
                        <div id="optionset-area">

                            <table id="optionset-picklist" class="table">
                                <thead>
                                    <tr>
                                        <th width="20"></th>
                                        <th>@app.T["displayname"]</th>
                                        <th>@app.T["value"]</th>
                                        <th>@app.T["selected_default"]</th>
                                        <th>@app.T["operation"]</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="draggable-ui optionsetItems">
                                        <td valign="middle"><span class="glyphicon glyphicon-hand-up draggable-icon" title="可拖动排序"></span></td>
                                        <td><input onblur="CheckRepeat('optionsetname')" type="text" name="optionsetname" class="form-control input-sm required optionrequired optionsetname" maxlength="50" /></td>
                                        <td><input onblur="CheckRepeat('optionsetvalue')" type="text" class="form-control input-sm required optionrequired optionsetvalue" name="optionsetvalue" data-type="int" /></td>
                                        <td>
                                            <input type="checkbox" onclick="$(this).next().val($(this).prop('checked'))" />
                                            <input name="isselectedoption" type="hidden" value="false" />
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-warning btn-xs" onclick="removeOption('optionset-picklist', this)">
                                                <span class="glyphicon glyphicon-trash"></span>
                                            </button>
                                            <button type="button" class="btn btn-info btn-xs" onclick="moveOption('optionset-picklist', this, true)">
                                                <span class="glyphicon glyphicon-arrow-up"></span>
                                            </button>
                                            <button type="button" class="btn btn-info btn-xs" onclick="moveOption('optionset-picklist', this, false)">
                                                <span class="glyphicon glyphicon-arrow-down"></span>
                                            </button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-12 text-center" id="form-buttons">
                    <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-saved"></span> @app.T["save"]</button>
                    <button type="reset" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span> @app.T["reset"]</button>
                </div>
            </form>
        </div>
    </div>
</div>
@section Scripts {
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.core.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.widget.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.mouse.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="/content/js/jquery-ui-1.10.3/ui/jquery.ui.sortable.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="/content/js/jquery.form.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="/content/js/jquery-validate/jquery.validate.min.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script src="/content/js/jquery-validate/localization/messages_zh.min.js?v=@app.PlatformSettings.VersionNumber"></script>
    <script>
        $(function () {

            Xms.Web.fullByContext($(window), $('#renderBody'), -80)
             Xms.Web.fullByContext($('#renderBody'),$('#optionset-area'),-180,0,'max-height')
            //表单验证
            Xms.Web.Form($("#editform"), function (response) {
                Xms.Web.Alert(response.IsSuccess, response.Content);
                Xms.Web.Event.publish('refresh');
                Xms.Web.Event.localStorageEvent.trigger('list_optionset_rebind');

                if (response.IsSuccess) {
                    clearOption('optionset-picklist');
                }
            }, '', function () {
                var nameCheck = CheckRepeat('optionsetname');
                var valueCheck = CheckRepeat('optionsetvalue');
                var requiredCheck = CheckRequired('optionrequired');
                if (!nameCheck || !valueCheck || !requiredCheck) {
                    return false;
                }
            }, {
                parentDom: function (ele) {
                    ele.parent().css('position','relative');
                }
            });
            //选项集
            Xms.Web.SingleCheckbox('#optionset-picklist', 'input[type=checkbox]', 'single');

            $('#optionset-picklist').sortable({
                cancel: 'input',
                items: ".draggable-ui",
                //placeholder: "drag-placeholder",
                over: function (event, ui) {
                    // if (!ui.item.is('.cell')) return;
                    var parent = $(event.target);
                },
                out: function (event, ui) {
                    //  if (!ui.item.is('.cell')) return;
                    var parent = $(event.target);
                },
                start: function (event, ui) {
                    console.log(event);
                    if (event.target && event.target.nodeType && event.target.nodeType == 'Tr') {

                    }
                },
                update: function (event, ui) {

                },
                stop: function (event, ui) {

                    //return false;
                }
            }).disableSelection();

             $('#renderBody').css({ 'margin-bottom': 40 });
        });
        $('body').on('blur', '.optionrequired', function () {
            CheckRequired(this);
        })
        //选项集-增加选项
        function addOption(id) {
            var $target = $("#" + id);
            var newRow = $target.find('tr:last').clone();
            newRow.find('input[type=text]').val('');
            newRow.find('input[type=hidden]').val(false);
            newRow.find('input[type=checkbox]').prop('checked', false);
            $target.append(newRow);
        }
        //选项集-删除选项
        function removeOption(id, row) {
            var $target = $("#" + id);
            if ($(row).parents('tr').siblings().length > 0) {
                $(row).parents('tr').remove();
            }
            else {
                var newRow = $(row).parents('tr');
                newRow.find('input[type=text]').val('');
                newRow.find('input[type=hidden]').val('');
                newRow.find('input[type=checkbox]').prop('checked', false);
            }
        }
        //选项集-清空选项
        function clearOption(id) {
            var $target = $("#" + id);
            $target.find('tbody').find('tr:gt(0)').remove();
            var newRow = $target.find('tbody').find('tr:last');
            newRow.find('input[type=text]').val('');
            newRow.find('input[type=hidden]').val(false);
            newRow.find('input[type=checkbox]').prop('checked', false);
        }
        //选项集-排序选项
        function moveOption(id, row, isup) {
            var $target = $("#" + id);
            var $this = $(row).parents('tr');
            if (isup == true && $this.prev().length > 0) {
                $this.insertBefore($this.prev());
            }
            else if (isup == false && $this.next().length > 0) {
                $this.insertAfter($this.next());
            }
        }
        //检查不能为空
        function CheckAllRequired(classname) {
            var check = true;
            $('.' + classname).each(function (i, n) {
                var ncheck = true;
                ncheck = CheckRequired(n);
                if (ncheck == false) {
                    check = false;
                }
            });
            return check;
        }
        function CheckRequired(e) {
            var eVal = $(e).val();
            if (eVal == '') {
                if ($(e).next('label[name="requiredtTip"]').length == 0) {
                    $('<label name="requiredtTip">这是必填字段</label>').insertAfter($(e));
                }
                return false;
            } else {
                $(e).next('label[name="requiredtTip"]').remove();
                return true;
            }
        }

        //检查是否有重复的值
        function CheckRepeat(classname) {
            var check = true;
            $('.' + classname).each(function (i, n) {
                var nVal = $(n).val();
                var ncheck = true;
                if (nVal == '') {
                    $(n).next('label[name="repeatTip"]').remove();
                    return true;
                }
                $('.' + classname).each(function (ii, nn) {
                    var nnVal = $(nn).val();
                    if (nnVal == '') {
                        return true;
                    }
                    if (nVal == nnVal && i != ii) {
                        if ($(n).next('label[name="repeatTip"]').length == 0) {
                            $('<label name="repeatTip">@app.T["please_enter_norepeat_values"]</label>').insertAfter($(n));
                        }
                        ncheck = false;
                        check = false;
                        return false;
                    }
                });
                if (ncheck == true) {
                    $(n).next('label[name="repeatTip"]').remove();
                }
            });
            return check;
        }
    </script>
}